<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更新网点信息</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/css/oksub.css">
<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>

	<div class="ok-body">
		<!--form表单-->
		<!--注意那些隐藏域input框，因为外键一般是它所属表的id字段，而页面上显示的一般是外键所属表的name字段，所以需要隐藏域保存id，给后台传值，方便新增和编辑-->
		<form class="layui-form layui-form-pane ok-form" lay-filter="filter">
		
			<div class="layui-form-item">
				<label class="layui-form-label">网点名称</label>
				<div class="layui-input-block">
					<input type="text" name="networkName" id="network_name"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<input type="hidden" name="networkId" autocomplete="off">

			
			<div class="layui-form-item">
				<label class="layui-form-label">所属网点</label>
				<div class="layui-input-block">
					<input type="text" name="parentNetworkName" lay-filter="parentNetworkName" id="parentNetworkName"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>

<!--			<div class="layui-form-item">-->
<!--				<label class="layui-form-label">财务中心</label>-->
<!--				<div class="layui-input-block">-->
<!--					<input type="text" name="financeCenter" id="finance_center"-->
<!--						autocomplete="off" class="layui-input" lay-verify="required">-->
<!--				</div>-->
<!--			</div>-->

			<div class="layui-form-item">
				<label class="layui-form-label">负责员工姓名</label>
				<div class="layui-input-block">
					<input type="text" name="principalName" id="principal_name"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-block">
					<input type="text" name="phone" id="phone"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">座机电话</label>
				<div class="layui-input-block">
					<input type="text" name="telphone" id="telphone"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
<!--			<div class="layui-form-item">-->
<!--				<label class="layui-form-label">财务中心标识</label>-->
<!--				<div class="layui-input-block">-->
<!--					<input type="text" name="financeCenterSign"id="finance_center_sign"-->
<!--						autocomplete="off" class="layui-input" lay-verify="required">-->
<!--				</div>-->
<!--			</div>-->
			
<!--			<div class="layui-form-item">-->
<!--				<label class="layui-form-label">分拨中心标识</label>-->
<!--				<div class="layui-input-block">-->
<!--					<input type="text" name="distributionCenterSign" id="distribution_center_sign"-->
<!--						autocomplete="off" class="layui-input" lay-verify="required">-->
<!--				</div>-->
<!--			</div>-->
			
			<div class="layui-form-item">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
					<input type="text" name="type" placeholder="请输入类型" id="type"
						autocomplete="off" class="layui-input" lay-verify="required" readonly="readonly">
				</div>
			</div>

			<div class="layui-form-item" id="area-picker">
				<div class="layui-form-label">网点地址</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="province" class="province-selector" data-value="" lay-filter="province-1" disabled="disabled">
						<option value="">请选择省</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="city" class="city-selector" data-value="" lay-filter="city-1" disabled="disabled">
						<option value="">请选择市</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="area" class="county-selector" data-value="" lay-filter="county-1" disabled="disabled">
						<option value="">请选择区</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">详细地址</label>
					<div class="layui-input-block">
						<input class="layui-input" id="address" lay-verify="required" name="address" />
					</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea name="remark" placeholder="请输入内容" id="remark" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>

		</form>
	</div>
	
	<!--js逻辑-->
	<script src="/lib/layui/layui.js"></script>
	<script>
	
	var initData;
	
	//设置标签，判断初始值是否已经赋值过了
	var isshow = false;
	
	function initForm(data) {
		var jsonString = JSON.stringify(data);
		initData = JSON.parse(jsonString);
		//console.info("1--->"+initData)由该语句和下面的输出语句可知，initForm方法和layui.use有执行先后顺序问题
		//！isshow为true时，证明该方法先执行，在该方法内赋初始值
		if (!isshow) {
			initView(initData);
		}
		
	}
	
	function initView(initData) {
		console.info(initData)
		//赋初始值，注意隐藏域也要赋值
		layui.use(["jquery","form"], function () {
			var $ = layui.jquery;
			var form = layui.form;
		form.val("filter",initData);
		console.log("这里进行选择");
			$("input[name='parentNetworkName']").attr('readonly','readonly');
			$("[name='province']").attr("data-value",initData.province);
			$("[name='province']").attr('readonly','readonly');
			$("[name='city']").attr("data-value",initData.city);
			$("[name='city']").attr('readonly','readonly');
			$("[name='area']").attr("data-value",initData.area);
			$("[name='area']").attr('readonly','readonly');
		// var network = "<option value='"+initData.networkId+"'  selected>"+initData.networkName+"</option>"
		// $("#network").html(network);
		
		$("input[name='address']").val(initData.address);
		});
		
		//将isshow重置为true，说明初始值已经赋值过了
		isshow = true;
		
	}
	
	layui.use(["element", "form", "laydate", "okLayer", "okUtils","jquery"], function () {
		var form = layui.form;
		var laydate = layui.laydate;
		var okLayer = layui.okLayer;
		var okUtils = layui.okUtils;
		var $ = layui.jquery;
		okLoading.close();
		



		//配置插件目录
		layui.config({
			base: '/lib/mods/'
			, version: '1.0'
		});
		//一般直接写在一个js文件中
		layui.use(['layer', 'form', 'layarea'], function () {
			var layer = layui.layer
					, form = layui.form
					, layarea = layui.layarea;

			layarea.render({
				elem: '#area-picker',
				change: function (res) {
					//选择结果
					console.log("这里进行渲染")
					console.log(res);
				}
			});
		});

		//console.info("2--->"+initData)
		//！isshow为true时，并且initData!=null&&initData!=undefined时，证明该方法先执行，在该方法内赋初始值
		if (!isshow && initData!=null&&initData!=undefined) {
			initView(initData);
		}

			form.on("submit(add)", function (data) { 
				
				okUtils.ajax("/api/network/edit", "post", data.field, true).done(function (response) {
					console.log(response);
					okLayer.greenTickMsg("操作成功", function () {
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					});
				}).fail(function (error) {
					console.log(error)
				});
				return false;
			});

	});
	</script>
</body>
</html>
